<!-- 专家已经发布的知识页面组件 -->
<template>
  <!-- 整个已发布知识页面的容器 -->
  <div class="published-message">
    <!-- 包含发布知识按钮的区域 -->
    <div style="padding:10px 20px 0">
      <!-- 发布知识按钮，点击触发发布知识的操作 -->
      <el-button type="success" @click="publishKnowledgeClick">发布知识</el-button>
    </div>
    <!-- 展示已发布知识内容的区域 -->
    <div class="publish-content">
      <!-- 循环渲染每条已发布的知识信息 -->
      <div class="message" v-for="(item, index) in userKnowledges" :key="index" :style="(index+1)%2===0?'margin-right:0':'margin-right:20px'">
        <!-- 当知识有图片路径时，显示对应的图片 -->
        <img v-if="item.picPath" class="knowledge-icon" :src="$store.state.imgShowRoad + '/file/' + item.picPath" alt="知识配图" />
        <!-- 当知识没有图片路径时，显示默认无图占位图 -->
        <img class="knowledge-icon" v-else src="../../assets/img/wutu.gif" alt="暂无知识配图" />
        <!-- 知识信息详情区域 -->
        <div class="info">
          <!-- 知识标题 -->
          <h4 class="title">{{ item.title }}</h4>
          <!-- 知识发起人信息 -->
          <span class="initiator">发起人：{{ item.ownName }}</span>
          <!-- 知识内容 -->
          <p class="content">{{ item.content }}</p>
          <!-- 操作按钮区域 -->
          <div class="btns-style">
            <!-- 点击修改知识信息，触发修改知识的操作 -->
            <div @click.once="changeKnowledgeInfo(item.knowledgeId)"><change-knowledge :cupdateKnowledgeInfo="updateInfo"></change-knowledge></div>
            <!-- 点击删除知识信息，触发删除知识的操作 -->
            <div @click.stop="deleteKnowledgeInfo(item.knowledgeId)"><delete-knowledge></delete-knowledge></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入根据知识 ID 查询知识信息的 API
import {
  selectKnowledgeById,
  selectKnowledgeByUsername,
} from "@/api/knowledge";
// 引入修改知识信息的组件
import ChangeKnowledge from "./ExpertChangeKnowledge.vue";
// 引入删除知识信息的组件
import DeleteKnowledge from "./ExpertDeleteKnowledge.vue";

export default {
  // 组件的数据对象
  data() {
    return {
      // 存储用户已发布的知识列表
      userKnowledges: [],
      // 存储需要更新的知识信息
      updateInfo: {},
    };
  },
  // 注册子组件
  components: { DeleteKnowledge, ChangeKnowledge },
  // 组件的方法
  methods: {
    // 点击发布知识按钮时，跳转到发布知识页面
    publishKnowledgeClick() {
      this.$router
        .push("/home/addmessage/publishknowledges")
        .catch((err) => err);
    },
    // 根据知识 ID 获取知识信息，用于修改操作
    changeKnowledgeInfo(item) {
      this.$store.commit("updateChangedKnowledgeId", item);
      selectKnowledgeById({
        knowledgeId: this.$store.state.changedKnowledgeId,
      })
        .then((res) => {
          this.updateInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 根据知识 ID 删除知识信息，更新 store 中的知识 ID
    deleteKnowledgeInfo(item) {
      this.$store.commit("updateChangedKnowledgeId", item);
    },
  },
  // 组件创建完成后执行的钩子函数
  created() {
    // 更新用户当前激活的导航索引
    this.$store.commit("updateUserActiveIndex", "4-3");
    // 获取用户已发布的知识列表
    selectKnowledgeByUsername({})
      .then((res) => {
        this.userKnowledges = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="less" scoped>
/**
 * 专家已发布知识页面的整体容器样式
 * 页面水平居中显示，固定宽度为 900px，高度占满父容器，背景颜色为白色
 */
.published-message {
  margin: 0 auto;
  width: 900px;
  height: 100%;
  background: #ffffff;
  /**
   * 已发布知识内容展示区域样式
   * 背景颜色为白色，使用 flex 布局实现内容换行，设置内边距为 10px 20px
   */
  .publish-content{
    background: #fcfcfc;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 20px;
  }
  /**
   * 单条知识信息块样式
   * 固定宽度为 420px，高度为 180px，有 1px 灰色边框，白色背景，
   * 使用 flex 布局，水平方向两端对齐
   */
  .message {
    width: 420px;
    height: 180px;
    border: 1px solid #efeee8;
    background-color: rgba(255, 255, 255, 0.55);
    margin: 10px 0 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /**
     * 知识信息块内所有图片的通用样式
     * 设置图片圆角为 6px
     */
    img{
      border-radius: 6px;
    }
    /**
     * 知识配图的样式
     * 固定宽度为 200px，高度为 178px，右侧有 10px 外边距，圆角为 6px
     */
    .knowledge-icon{
      width: 200px;
      height: 178px;
      margin-right: 10px;
      border-radius: 6px;
    }
    /**
     * 知识信息详情区域样式
     * 固定宽度为 200px，左右有 10px 内边距
     */
    .info {
      width: 200px;
      padding: 0 10px;
      /**
       * 知识发起人信息样式
       * 文字颜色为灰色
       */
      .initiator {
        color: #27578d;
      }
      /**
       * 知识标题样式
       * 固定高度为 30px，行高 30px，超出部分隐藏并用省略号显示，
       * 最多显示 1 行
       */
      .title{
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      /**
       * 知识内容样式
       * 固定高度为 75px，行高 25px，超出部分隐藏并用省略号显示，
       * 最多显示 3 行
       */
      .content {
        height: 75px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
    }
    /**
     * 操作按钮区域样式
     * 使用 flex 布局，水平方向右对齐
     */
    .btns-style{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}
</style>